<template>
	<view>
		<view class="store w">
			<u-navbar title="商城" :bgColor="bgColor"></u-navbar>
			<view class="store_bg">
				<view class="dis_flex ml24 mr30 pb20" :style="{ marginTop: statusHeight }">
					<view class="radius50 h64 dis_f" style="width: 610rpx;background-color: rgba(132, 61, 59, 0.15);)" @click="goStoreSearch">
						<u--input
							placeholder="请输入关键字"
							placeholderStyle="color:#843D3B"
							prefixIcon="search"
							readonly
							border="none"
							prefixIconStyle="font-size: 22px;color: #843D3B;margin-left:30rpx"
						></u--input>
					</view>
					<view class="fz28 lh10" @click="goCart"><image class="h48" src="../../static/image/31gouwuche.png" mode="heightFix"></image></view>
				</view>
				<view class="ro-swiper ml30 mr30"><u-swiper :list="roBanner" indicator indicatorMode="line" circular height="134"></u-swiper></view>
			</view>
		</view>
		<!-- 轮播图 -->
		<!-- 商城菜单 -->
		<view class="dis_flex bac_f mt24 ml24 mr24 radius16 bs6" style="padding: 24rpx 36rpx">
			<view class="dfd_c ac" @click="goStoreClass">
				<image src="../../static/image/s_fenlei.png" style="width: 80rpx; height: 80rpx" class="" mode="aspectFit"></image>
				<view class="fz26 tf_333">商品分类</view>
			</view>
			<view class="dfd_c ac" @click="goStoreRecommend">
				<image src="../../static/image/s_tuijian.png" style="width: 80rpx; height: 80rpx" class="" mode="aspectFit"></image>
				<view class="fz26 tf_333">推荐商品</view>
			</view>
			<view class="dfd_c ac" @click="goStoreOrder">
				<image src="../../static/image/s_order.png" style="width: 80rpx; height: 80rpx" class="" mode="aspectFit"></image>
				<view class="fz26 tf_333">我的订单</view>
			</view>
			<view class="dfd_c ac" @click="">
				<image src="../../static/image/s_shouhou.png" style="width: 80rpx; height: 80rpx" class="" mode="aspectFit"></image>
				<view class="fz26 tf_333">我的售后</view>
			</view>
		</view>
		<view class="" id="scrollView">
			<u-tabs
				:list="tabs"
				disabled="true"
				lineWidth="25"
				lineHeight="8"
				:scrollable="false"
				@click="tabClick"
				:current="cur_type"
				:lineColor="
					`url() 100% 100%`
				"
				:activeStyle="{
					color: '#222',
					fontWeight: '600',
					fontSize: '15'
				}"
				:inactiveStyle="{
					color: '#999'
				}"
				itemStyle="height: 42px;"
			></u-tabs>
		</view>
		<view class="pl24 pr24 dis_flex fww">
			<view class="radius12 bac_f mt18" style="width: 342rpx" v-for="(item, index) in store_list" :key="index" @click="goStoreDetail(item.id)">
				<image class="radius12" style="width: 342rpx; height: 346rpx" :src="item.image" mode="aspectFill"></image>
				<view class="pl20 pr20 mt10">
					<view class="fz28">{{ item.name }}</view>
					<view class="dis_flex mt28 pb20">
						<view class="fz32 fw tf1">￥{{ item.price }}</view>
						<view class="fz20 tf_999">已售{{ item.sales_volume }}件</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="is_last" class="w tf_999 fz28 tac mt24">已经触碰到底线了~</view>
		<view class="w h100"></view>
	</view>
</template>

<script>
import { classRight, getStorelist } from '@/config/api.js';
export default {
	data() {
		return {
			istop: 0,
			myScroll: '',
			tabH: '',
			statusHeight: '', //状态栏高度
			is_last: false,
			last_page: '', //最后一页
			store_list: [], //商城列表
			page: 1,
			cur_type: 0, //当前类型
			bgColor: 'rgba(255,255,255,0)',
			roBanner: [
'https://cdn.uviewui.com/uview/swiper/swiper1.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
			],
			tabs: [{ name: '热门商品' }, { name: '推荐商品' }, { name: '新品上新' }]
		};
	},
	onLoad() {
		this.getStoreInfo();
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 50 + 'px';
		this.tabH = res.statusBarHeight + 44 + 'px';
	},
	onReady() {
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#scrollView')
				.boundingClientRect(data => {
					console.log('布局位置信息', JSON.stringify(data));
					console.log('节点离页面顶部的距离' + data.top);
					this.myScroll = data.top;
				})
				.exec();
		});
	},
	//触底加载
	onReachBottom() {
		let type = this.cur_type + 1;
		if (this.page < this.last_page) {
			this.page = this.page + 1;
			getStorelist({ page: this.page, type: type }).then(res => {
				console.log(res);
				res.list.forEach(v => {
					this.store_list.push(v);
				});
			});
		} else {
			this.is_last = true;
		}
		console.log(this.store_list);
	},
	onPageScroll: function(e) {
		this.bgColor = '#fff';
		if (e.scrollTop == 0) {
			this.bgColor = 'rgba(255,255,255,0)';
		}
		// if (e.scrollTop > this.myScroll) {
		// 	console.log(this.myScroll);
		// 	this.istop = 1;
		// } else {
		// 	this.istop = 0;
		// }
	},
	methods: {
		//跳转搜索页面
		goStoreSearch(){
			uni.navigateTo({
				url:'../../page_store/storeSearch/storeSearch'
			})
		},
		//跳转推荐商品
		goStoreRecommend() {
			uni.navigateTo({
				url: '../../page_store/storeRecommend/storeRecommend'
			});
		},
		//跳转商城订单
		goStoreOrder() {
			uni.navigateTo({
				url: '../../page_store/storeOrder/storeOrder'
			});
		},
		//跳转详情
		goStoreDetail(id) {
			console.log(id);
			uni.navigateTo({
				url: '../../page_store/storeDetail/storeDetail?id=' + id
			});
		},
		//切换菜单
		tabClick(item) {
			console.log(item);
			let page = 1;
			let type = item.index;
			getStorelist({ page: page, type: type }).then(res => {
				this.store_list = res.list;
				this.last_page = res.last_page;
			});
		},
		//列表详情
		getStoreInfo() {
			let page = 1;
			let type = this.cur_type + 1;
			getStorelist({ page: page, type: type }).then(res => {
				console.log(res);
				this.store_list = res.list;
				this.last_page = res.last_page;
			});
		},
		//跳转商城分类界面
		goStoreClass() {
			uni.navigateTo({
				url: '../../page_store/storeClass/storeClass'
			});
		},
		//跳转购物车界面
		goCart() {
			uni.navigateTo({
				url: '../../page_store/storeCart/storeCart'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.fixed {
	position: fixed;
	top: 0rpx;
	z-index: 10;
	background-color: #fff;
}
.store {
	background-image: url('https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/fee960ffa82abfa09c250de808e25586.jpg');
	background-repeat: no-repeat;
	/deep/ .u-navbar__content__left {
		display: none;
	}
}
</style>
